<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-date-picker
              v-model="month"
              type="month"
              @change="monthChange"
              value-format="yyyy-MM"
              placeholder="选择月">
            </el-date-picker>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="12" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="customerchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计表 -->
    <el-row :gutter="23"  style="margin-top:20px">
      <el-table size="small" :data="customerList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 80%;">
      <el-table-column align="center" prop="id" label="编号" width="150">
      </el-table-column>
      <el-table-column align="center" prop="userInfo.nickName" label="顾客昵称" width="150">
      </el-table-column>
      <el-table-column align="center" prop="userInfo.phone" label="顾客手机号" width="200"></el-table-column>
      <el-table-column align="center" prop="total" label="消费总金额(元)" width="150"></el-table-column>
      <el-table-column align="center" prop="date" label="消费时间" min-width="200"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="seeMoney(scope.row.userInfo.id)" type="warning">查个人消费</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageQuery" @callFather="callFather"></Pagination>
    </el-row>
    <el-dialog title="消费明细" :visible.sync="dialog" width="50%">
      <el-table size="small" :data="moneyDetail" highlight-current-row border  style="width: 100%;" max-height="400">
      <el-table-column align="center" prop="id" label="编号" width="200">
      </el-table-column>
      <el-table-column align="center" prop="orderSerialNumber" label="订单编号" width="200">
      </el-table-column>
      <el-table-column align="center" prop="money" label="消费金额(元)" width="200"></el-table-column>
      <el-table-column align="center" prop="createTime" label="消费时间" min-width="200"></el-table-column>
    </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" class="title" @click="dialog=false">我知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '../../components/Pagination'
import Chart from 'echarts'
 // 引入折线图组件
require('echarts/lib/chart/line')
// 引入提示框和title、图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  name: "Custom",
  data() {
    return {
      dialog: false,
      loading: false, //是显示加载
      customerList: [], // 顾客列表
      moneyDetail: [], // 明细列表
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      month: '',
      type: 'day',
      //  销售总笔数 
      customerchartoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}日 : {c}"
        },
        legend: {
          data: [{
            name: '消费者总人数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 6
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '消费者总人数',
          type: 'bar',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },
      //  销售总金额 
      SUMoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}日 : {c}"
        },
        legend: {
          data: [{
            name: '销售总金额',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售总金额',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      // 每日到账金额
      incomeoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}日 : {c}"
        },
        legend: {
          data: [{
            name: '每日到账',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '每日到账',
          //   type: 'bar',
          type: 'bar',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
    }
  },
  components: {
    Pagination
  },
  created() {
    
   },
  computed: {
  },
  mounted() {
    this.getCustomerList()
    // 当前月份
    this.month = new Date().getFullYear() + '-' + ((new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1))
    this.monthChange(this.month)
  },
  methods: {
    /**
     * 查个人消费
     */
    seeMoney (id) {
      let query = {
        userId: id,
        date: this.month,
        pageNum: 1,
        pageSize: -1
      }
      this.$api.chart.userSpendDetails(query).then(res => {
        if (res.code === 200) {
          this.moneyDetail = res.data.records
          this.dialog = true
        }
      })
    },
    /**
     * 获取所有顾客消费信息
     */
     getCustomerList () {
       this.loading = true
       this.$api.chart.totalUserSpend(this.pageQuery).then(res => {
         if (res.code === 200) {
           this.customerList = res.data.records
           this.loading = false
         }
       })
     },
    /**
     * 分页插件事件
     */
    callFather(parm) {
      this.pageQuery.pageNum = parm.currentPage
      this.pageQuery.pageSize = parm.pageSize
      this.getCustomerList(this.pageQuery)
    },
    /**
     * 月
     */
    monthChange (val) {
      this.getCustomer(val)
      // this.getSUM(val)
      // this.getIncome(val)
    },
    /**
     * 消费者总人数
     */ 
    getCustomer(val) {
      let query = {
        dateStr: val
      }
      this.$api.chart.queryByMonth(query).then(res => {
        if (res.code === 200) {
          this.customerchartoption.xAxis.data = res.data.map((item, index) => `${index + 1}`)
          this.customerchartoption.series[0].data = res.data
          let chart = Chart.init(this.$refs.customerchart)
          chart.setOption(this.customerchartoption)
        }
      })
    },
    /**
     * 交易总金额
     */
    getSUM(val) {
      let query = {
        dateStr: val
      }
      this.$api.chart.saleMoneyByMonth(query).then(res => {
        if (res.code === 200) {
          this.SUMoption.xAxis.data = res.data.map((item, index) => `${index + 1}`)
          this.SUMoption.series[0].data = res.data
          let chart = Chart.init(this.$refs.SUMEchart)
          chart.setOption(this.SUMoption)
        }
      })
    },
    /**
     * 每日到账金额
     */
    getIncome (val) {
      let query = {
        dateStr: val
      }
      this.$api.chart.incomeByMonth(query).then(res => {
        if (res.code === 200) {
          this.incomeoption.xAxis.data = res.data.map((item, index) => `${index + 1}`)
          this.incomeoption.series[0].data = res.data
          let chart = Chart.init(this.$refs.incomechart)
          chart.setOption(this.incomeoption)
        }
      })
    }
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
